<template>
    <div>
    <!-- 使用vue 写一个前段登录页面，包含用户名和密码输入框，以及登录按钮，点击登录按钮后，向后端发送登录请求，后端接收到请求后，验证用户名和密码，如果正确，返回登录成功的信息，否则返回登录失败的信息。 -->

    <!-- <h1>学生列表</h1>
      <table> 
        <tr></tr>
      </table>
      <h1>学生列表</h1>
      <table>
        <tr>
          <td>ID</td>
          <td>姓名</td>
          <td>年龄</td>
          <td>爱好</td>
        </tr>
        <tr v-for="item in students">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.hobby}}</td>
        </tr>
      </table>
      {{msg}}-->
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  export default {
    name: "Student",
    data(){
      return{
        msg:"Hello Vue",
        students:null,	// 之前这里存放的是假数据列表，现在我们可以直接让他为null
      }
    },
    created() {
      const _this = this  // 这里的this是全局
      this.$axios.get("/hello").then(function (resp){		// 因为我们在main.js文件配置了后端端口的访问地址(下文有讲)，所以这里可以直接'/select/'
        _this.students = resp.data  // 这里如果用this指得就是这个匿名函数了
      })
    }
  }
  </script>
  
  <style scoped>
  
  </style>
  